	<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>订单页面</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css"/>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<script src="../js/cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="header-wrap">
			<div class="header" style="width: 980px;">
				<ul class="header-left">
					<li class="province_li">
						<div id="pro_box">
						    <span>送货至</span>
							<span class="province_name">河南</span>
						</div>
						<ul id="headerAllProvince" class="hd_provincelist" style="display:none;">
							<li>
								<em>A</em>
								<a href="" id="p_13" target="_self">安徽</a>
							</li>
							<li>
								<em>B</em>
								<a href="" id="p_2" target="_self"><strong>北京</strong></a>
							</li>
							<li>
								<em>C</em>
								<a href="" id="p_7" target="_self">重庆</a>
							</li>
							<li>
								<em>G</em>
								<a href="" id="p_20" target="_self"><strong>广东</strong></a>
								<a href="" id="p_21" target="_self">广西</a>
								<a href="" id="p_23">贵州</a>
								<a href="" id="p_27">甘肃</a>
							</li>
							<li>
								<em>F</em>
								<a href="" id="p_14" target="_self">福建</a>
							</li>
							<li>
								<em>H</em>
								<a href="" id="p_4" target="_self">河北</a>
								<a href="" id="p_11" target="_self">黑龙江</a>
								<a href="" id="p_22" target="_self">海南</a>
								<a href="" id="p_18" target="_self">湖北</a>
								<a href="" id="p_19" target="_self">湖南</a>
								<a href="" id="p_17" target="_self">河南</a>
							</li>
							<li>
								<em>J</em>
								<a href="" id="p_5" target="_self">江苏</a>
								<a href="" id="p_10" target="_self">吉林</a>
								<a href="" id="p_15" target="_self">江西</a>
							</li>
							<li>
								<em>L</em>
								<a href="" id="p_8" target="_self">辽宁</a>
							</li>
							<li>
								<em>N</em>
								<a href="" id="p_8" target="_self">内蒙古</a>
								<a href="" id="p_30" target="_self">宁夏</a>
							</li>
							<li>
								<em>Q</em>
								<a href="" id="p_20" target="_self">青海</a>
							</li>
							<li>
								<em>S</em>
								<a href="" id="p_1" target="_self"><strong>上海</strong></a>
								<a href="" id="p_16" target="_self">山东</a>
								<a href="" id="p_32" target="_self">山西</a>
								<a href="" id="p_12" target="_self">四川</a>
								<a href="" id="p_26" target="_self">陕西</a>
							</li>
							<li>
								<em>T</em>
								<a href="" id="p_3" target="_self">天津</a>
							</li>
							<li>
								<em>X</em>
								<a href="" id="p_25" target="_self">西藏</a>
								<a href="" id="p_29" target="_self">新疆</a>
							</li>
							<li>
								<em>Y</em>
								<a href="" id="p_24" target="_self">云南</a>
							</li>
							<li>
								<em>Z</em>
								<a href="" id="p_6" target="_self">浙江</a>
							</li>
						</ul>
					</li>
				</ul>
				<script>
					window.onload=function(){
						var oBtn=document.getElementById("pro_box");
						var level=document.getElementById("headerAllProvince");
						var ospan=level.children;
						level.onmouseover=function(){
							this.style.display="block";
						}
						oBtn.onmouseover=function(){
							level.style.display="block";
						}
					    level.onmouseout=function(){
					    	this.style.display="none";
					    }
					    oBtn.onmouseout=function(){
					    	level.style.display="none";
					    }
					}
		        </script>
				<ul class="header-right">
					<li>
						<a class="red" title="登录1药网" href="login.html">请登录</a>
						<script type="text/javascript">
							if(getCookie('username')){
								$('.red').html(getCookie('username'));
							}
						</script>
				        <a title="注册会员，网上买药更简单" href="registe.html">注册</a><span>|</span>
					</li>
					<li>
					    <a href="">我的订单</a>|
					</li>
					<li>
						<a class="my1wang" href="">我的1药网
							<!--<span class="net">
								<a href="">我的优惠券</a>
								<a href="">我的收藏夹</a>
								<a href="">商品评价</a>
								<a href="">我的私人订制</a>
							</span>-->
						</a>|
					</li>
					<li>
						<a href="">帮助中心</a>|
					</li>		
					<li>	
					    <i class="tellnumber" href="">400-007</i>|
					</li>
					<li>
						<a class="tell" href="">
							<em></em>
							<i>手机APP</i>
						</a>
					</li>
					<li>
					    <a class="favorite" href="">
							<em></em>
							<i>收藏</i>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="cart-top" style="border-bottom:2px solid #a5a5a5;">
			<p>
				<span style="float:left;height:30px;font-size:16px;line-height: 40px;">填写核对订单信息</span>
			</p>
		</div>
		<div class="writelist" style="width:980px;height:749px;margin:0 auto;">
			<div class="shouhuo" style="border-bottom: 2px solid #e6e6e6;">
				<p class="shouhuo_tit">收货地址<p>
				<div class="shouhuo_write">
					<table style="margin-left: 40px;height:187px;">
						<tr style="height:26px;">
							<td style="width:73px;height:24px;line-height:24px;">
								<span class="xing" style="color:#C60000;font-size:14px;margin-right:5px;height:25px;padding-top:4px;;display:inline-block;">*</span>
								收货地区：
							</td>
							<td>
								<select>
									<option>河南</option>
									<option>陕西</option>
									<option>山西</option>
									<option>山东</option>
									<option>北京</option>
								</select>
								<select>
									<option>请选择市/区</option>
									<option>陕西</option>
									<option>山西</option>
									<option>山东</option>
									<option>北京</option>
								</select>
								<select>
									<option>请选择区/县</option>
									<option>陕西</option>
									<option>山西</option>
									<option>山东</option>
									<option>北京</option>
								</select>
							</td>
						</tr>
						<tr style="height:26px;">
							<td style="width:75px;height:24px;line-height:24px;">
								<span class="xing" style="color:#C60000;font-size:14px;margin-right:5px;height:22px;padding-top:4px;;display:inline-block;">*</span>
								详细地址：
							</td>
							<td>
								<input type="text" style="width:367px;height:22px;background:#fff;border:none;">
							</td>
						</tr>
						<tr style="height:26px;">
							<td style="width:75px;height:24px;line-height:24px;">
								<span class="xing" style="color:#C60000;font-size:14px;margin-right:5px;height:22px;padding-top:4px;;display:inline-block;">*</span>
								收货人：
							</td>
							<td>
								<input type="text" style="width:150px;height:22px;background:#fff;border:none;">
							</td>
						</tr>
						<tr style="height:26px;">
							<td style="width:75px;height:24px;line-height:24px;">
								<span class="xing" style="color:#C60000;font-size:14px;margin-right:5px;height:22px;padding-top:4px;;display:inline-block;">*</span>
								手机号码：
							</td>
							<td>
								<input type="text" style="width:150px;height:22px;background:#fff;border:none;">
							
							或固定电话：
							    <input type="text" style="width:50px;height:22px;background:#fff;border:none;value="区号"/>-
							    <input type="text" style="width:80px;height:22px;background:#fff;border:none;value="电话号码"/>-
							    <input type="text" style="width:50px;height:22px;background:#fff;border:none;value="分号"/>
							</td>
						</tr>
						<tr style="height:26px;">
							<td style="width:75px;height:24px;line-height:24px;">
							</td>
							<td>
								<a class="save_address" style="display:block;width:86px;height:31px;line-height:31px;background:#0066CC;border:none;color:#fff;text-align: center;cursor:pointer;">
								保存地址</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="zhifu" style="border-bottom: 2px solid #e6e6e6;">
				<p class="shouhuo_tit">支付信息<img src="../img-xq/tanhao.png"/ style="margin-left:10px;"></p>
				<div class="onlinepay" style="height:72px;background:#eaf9ff;">
					<p style="margin-left:40px;">
						<img src="../img-xq/zhifu.png"/>
					</p>
					<p style="margin-left:40px;">
						<input type="radio"/ style="margin-right:6px;">银行转账<i style="margin-left:10px;font-size:12px;color:#5e5e5e;font-style: normal;">目前只支持中国银行</i>
					</p>
					<p style="margin-left:40px;margin-top：10px;">
						<img src="../img-xq/xiala.png" style="margin-right:6px;">
							<i style="margin-left:8px;font-size:12px;color:#5e5e5e;font-style: normal;">
								使用优惠券
							</i>
					</p>
					<p style="width:980px;height:20px;text-align: right;">
						<a href="xiangq.html" style="font-size:14px;color:#d00;">返回继续购物>></a>
					</p>
				</div>
			</div>
			
			<table class="cartTable" border="0" cellspacing="0" cellpadding="0">
			<colgroup span='1' style="width:80px;border:1px solid #eee;"></colgroup>
			<colgroup span='1' style="width:400px;border:1px solid #eee;"></colgroup>
			<colgroup span='1' style="width:80px;border:1px solid #eee;"></colgroup>
			<colgroup span='1' style="width:190px;border:1px solid #eee;"></colgroup>
			<colgroup span='1' style="width:120px;border:1px solid #eee;"></colgroup>
			<colgroup span='1' style="width:120px;border:1px solid #eee;"></colgroup>

			<tr style="height: 35px;width:800px;background: #e1e1e1;">
				<th>
					<input class="selectAllCheckbox" type="checkbox" name="" id="" value="" />
					全选
				</th>
				<th>商品信息</th>
				<th>金额</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			
			<!--<tr class="cartTr">
				<td class="selectAll"></td>
				<td class="goodsName"></td>
				<td class="cartPrice"></td>
				<td class="cartNum"></td>
				<td class="cartLittleTotal"></td>
				<td class="handle">
					<a href="javascript:;">删除</a>
				</td>
			</tr>-->
				
		</table>
		<p class="clearCookieP" id="clearCookiePId">
			<span>清空购物车</span>
		</p>
		<script type="text/javascript">
			if(getCookie('dataArr')){
				//console.log(getCookie('dataArr'))
				var cookiesStr="["+ getCookie('dataArr')+"]";
				var cookiesJson=eval(cookiesStr);
				for(i=0;i<cookiesJson.length;i++){
					var Newtr=document.createElement('tr');
					$('.cartTable')[0].appendChild(Newtr);
					
					var Newtd1=document.createElement('td');
					var NewcheckBox=document.createElement('input');
					NewcheckBox.setAttribute('type','checkbox');
					NewcheckBox.setAttribute('class','tabCheckBox');
					Newtd1.appendChild(NewcheckBox);
					Newtr.appendChild(Newtd1);
					
					var Newtd2=document.createElement('td');
					Newtd2.innerHTML=cookiesJson[i].goosName;
					Newtr.appendChild(Newtd2);
					
					var Newtd3=document.createElement('td');
					Newtd3.innerHTML=cookiesJson[i].onlinePrice;
					Newtr.appendChild(Newtd3);
					
					var Newtd4=document.createElement('td');
					Newtd4.innerHTML=cookiesJson[i].goodsNum;
					Newtr.appendChild(Newtd4);
					
					var Newtd5=document.createElement('td');
					var litt=parseInt(cookiesJson[i].goodsNum)*parseInt(cookiesJson[i].onlinePrice.substring(1,cookiesJson[i].onlinePrice.length-1));
					Newtd5.innerHTML=litt+"元";
					Newtr.appendChild(Newtd5);
					
					var Newtd6=document.createElement('td');
					var oA=document.createElement('a');
					oA.setAttribute('href','javascript:;')
					oA.setAttribute('class','delUseless')
					Newtd6.appendChild(oA);
					oA.innerHTML="删除";
					Newtr.appendChild(Newtd6);
					
				}
				
				if($('.selectAllCheckbox')[0].checked==true){
					$('.tabCheckBox').prop("checked", true);
				}else if($('.selectAllCheckbox')[0].checked==false){
					$('.tabCheckBox').removeAttr("checked");
					$('.cartTable tr td a').addClass('delUseless');
				}
				
				
				
				/*全选*/
				$('.selectAllCheckbox').click(function(){
					if($('.selectAllCheckbox')[0].checked==true){
						$('.tabCheckBox').prop("checked", true);
						$('.cartTable tr td a').removeClass('delUseless');
					}else if($('.selectAllCheckbox')[0].checked==false){
						$('.tabCheckBox').removeAttr("checked");
						$('.cartTable tr td a').addClass('delUseless');
					}
				});
				
				/*给每一个checkbox添加点击事件*/
				$('.cartTable tr td input').click(function(){
					if($(this)[0].checked==true){
						$(this).parent().next().next().next().next().next().children().removeClass('delUseless');
					}else{
						$(this).parent().next().next().next().next().next().children().addClass('delUseless');
					}
				});
				
				$('.cartTable tr td a').click(function(){
					if($(this).attr('class')!='delUseless'){
						if(confirm("确定要删除这条记录？"))
						{	
							var delStr="["+getCookie('dataArr')+"]";
						
							var delArr=eval(delStr);
							var delIndex=$(this).parent().parent().index()-7;
							
							var afterDelArr=delArr.splice(delIndex,1);
							var afterDelStr='';
							for(var i=0;i<delArr.length;i++){
								afterDelStr=afterDelStr+JSON.stringify(delArr[0])+',';
							}
							
							setCookies('dataArr',afterDelStr,3,'/') ;
							self.location='cart.html';
						}
					}else{
						alert('您还没有选中该记录！')
					}
					
				});
				
				$('.clearCookieP span').click(function(){
					if($('.selectAllCheckbox')[0].checked){
						if(confirm("确定要清空购物车吗？"))
						{
						    setCookies('dataArr','',-1,'/');
							dataArr=[];
							self.location='userorder1.html';
						}
					}else{
						alert('您还没有全选！');
					}
					
					
				});
			}
		</script>
			<p style="width:980px;height:40px; margin-top: 30px;;">
				<a class="submitOrder" style="display:block;width:207px;height:37px;background:#CC0000;float:right;font-size:16px;color:#fff;line-height:37px;text-align: center;cursor: pointer;margin-top:8px;">
					提交订单
				</a>
			</p>
			<script type="text/javascript">
				$('.submitOrder').click(function(){
					if(getCookie('dataArr')==''){
						alert('您的购物车里还没有东西！');
					}else{
						alert('提交成功，去支付！');
					}
				});
			</script>
		</div>
		</div>
		</div>
	</body>
</html>
